<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美日生鲜</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="topbar">
        <div class="topbar-main margin-center">
            <img src="./images/icons/icon-top-1@2x.png" class="icon-home" alt="">
            <span>美日生鲜</span>
            <img src="./images/icons/icon-top-2@2x.png" class="icon-position" alt="">
            <span>浙江</span>
            <ul>
                <li>登录 |</li>
                <li>注册 |</li>
                <li>购物车 |</li>
                <li>我的收藏 |</li>
                <li>消息 |</li>
                <li>商城小程序</li>
            </ul>
        </div>
    </div>

    <!-- header -->
    <header class="site-header">
        <div class="header-main margin-center">
            <img src="./images/logo@2x.png" class="mrsx-logo" alt="">

            <div class="header-search">
                <input type="text" placeholder="纯牛奶">
                <button>搜索</button>
            </div>
            <button class="header-button">
                <img src="./images/icons/icon-cart-1@2x.png" alt="">
                <span>我的购物车</span>
            </button>
            <button class="header-button">
                <img src="./images/icons/icon-qr-1@2x.png" alt="">
                <span>我的购物车</span>
            </button>
        </div>
    </header>

    <!-- 菜单版本 menu -->
    <div class="menu margin-center">
        <div class="menu-head">
            <div class="menu-head-left">美日生鲜商品分类</div>
            <ul class="menu-head-mid">
                <li class="color-blue">生鲜首页</li>
                <li>杭帮菜</li>
                <li>精选好物</li>
                <li>样样新鲜</li>
                <li>中秋活动</li>
            </ul>
            <ul class="menu-head-right">
                <li><img src="./images/icons/icon-banner-1@2x.png" alt=""> 品质保障</li>
                <li><img src="./images/icons/icon-banner-2@2x.png" alt=""> 一站式购齐</li>
                <li><img src="./images/icons/icon-banner-3@2x.png" alt=""> 满88免配送费</li>
            </ul>
        </div>
        <div class="menu-content">
            <aside>
                <ul>
                    <li>
                        <div class="menu-item-icon">
                            <img src="./images/icons/icon-banner-4@2x.png" alt="">
                        </div>
                        <div class="menu-item-content">
                            <div class="item-content-top">
                                <span>新鲜水果</span> <img src="./images/icons/icon-banner-10@2x.png"
                                    class="item-right-arrow" alt="">
                            </div>
                            <div class="item-content-bottom">
                                海鲜礼盒 | 鱼类 | 贝类
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item-icon">
                            <img src="./images/icons/icon-banner-5@2x.png" alt="">
                        </div>
                        <div class="menu-item-content">
                            <div class="item-content-top">
                                <span>肉禽蛋品</span> <img src="./images/icons/icon-banner-10@2x.png"
                                    class="item-right-arrow" alt="">
                            </div>
                            <div class="item-content-bottom">
                                鸡蛋 | 猪肋排 | 牛排
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item-icon">
                            <img src="./images/icons/icon-banner-6@2x.png" alt="">
                        </div>
                        <div class="menu-item-content">
                            <div class="item-content-top">
                                <span>果蔬鲜花</span> <img src="./images/icons/icon-banner-10@2x.png"
                                    class="item-right-arrow" alt="">
                            </div>
                            <div class="item-content-bottom">
                                水蜜桃 | 黄瓜 | 玫瑰
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item-icon">
                            <img src="./images/icons/icon-banner-7@2x.png" alt="">
                        </div>
                        <div class="menu-item-content">
                            <div class="item-content-top">
                                <span>乳品烘焙</span> <img src="./images/icons/icon-banner-10@2x.png"
                                    class="item-right-arrow" alt="">
                            </div>
                            <div class="item-content-bottom">
                                吹牛奶 | 面包 | 甜品
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item-icon">
                            <img src="./images/icons/icon-banner-8.png" alt="">
                        </div>
                        <div class="menu-item-content">
                            <div class="item-content-top">
                                <span>速冻食品</span> <img src="./images/icons/icon-banner-10@2x.png"
                                    class="item-right-arrow" alt="">
                            </div>
                            <div class="item-content-bottom">
                                水饺 | 冰淇淋 | 汤圆
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item-icon">
                            <img src="./images/icons/icon-banner-9@2x.png" alt="">
                        </div>
                        <div class="menu-item-content">
                            <div class="item-content-top">
                                <span>酒水饮料</span> <img src="./images/icons/icon-banner-10@2x.png"
                                    class="item-right-arrow" alt="">
                            </div>
                            <div class="item-content-bottom">
                                茶饮 | 葡萄酒 | 咖啡
                            </div>
                        </div>
                    </li>
                </ul>
            </aside>
            <div class="swiper">
                <img src="./images/slide-1@2x.png" alt="">
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination">
                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="fresh-service margin-center">
        <ul class="mod-service">
            <li class="mod-service-item">
                <div class="mod_service_item_inner">
                    <div class="service-item-icon">
                        <img src="./images/icons/icon-banner-13@2x.png" alt="">
                    </div>
                    <div class="service-item-content">
                        <h1>食品安全</h1>
                        <p>精选生鲜 严格质检</p>
                    </div>
                </div>
            </li>
            <li class="mod-service-item">
                <div class="mod_service_item_inner">
                    <div class="service-item-icon">
                        <img src="./images/icons/icon-banner-14@2x.png" alt="">
                    </div>
                    <div class="service-item-content">
                        <h1>食品安全</h1>
                        <p>精选生鲜 严格质检</p>
                    </div>
                </div>
            </li>
            <li class="mod-service-item">
                <div class="mod_service_item_inner">
                    <div class="service-item-icon">
                        <img src="./images/icons/icon-banner-15@2x.png" alt="">
                    </div>
                    <div class="service-item-content">
                        <h1>食品安全</h1>
                        <p>精选生鲜 严格质检</p>
                    </div>
                </div>
            </li>
            <li class="mod-service-item">
                <div class="mod_service_item_inner">
                    <div class="service-item-icon">
                        <img src="./images/icons/icon-banner-16@2x.png" alt="">
                    </div>
                    <div class="service-item-content">
                        <h1>食品安全</h1>
                        <p>精选生鲜 严格质检</p>
                    </div>
                </div>
            </li>
            <li class="mod-service-item">
                <div class="mod_service_item_inner">
                    <div class="service-item-icon">
                        <img src="./images/icons/icon-banner-17@2x.png" alt="">
                    </div>
                    <div class="service-item-content">
                        <h1>食品安全</h1>
                        <p>精选生鲜 严格质检</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- 广告海报 -->
    <div class="poster margin-center">
        <img src="./images/ad-1@2x.png" alt="">
    </div>

    <!-- 鲜品专区 -->
    <section class="fresh-section margin-center">
        <h1 class="fresh-section-title">鲜品专区</h1>
        <div class="check-more">
            查看更多
        </div>
        <div class="fresh-section-content">
            <div class="section-poster">
                <img src="./images/ad-2@2x.png" alt="">
            </div>
            <div class="section-list">
                <div class="section-list-item">
                    <img src="./images/goods-cover-1@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">冰鲜精品五花肉400g</h3>
                        <p class="goods-desc">白猪带皮五花，精养，精选，精分切，肉味醇</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-2@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">帝皇鲜三文鱼鱼肉200g</h3>
                        <p class="goods-desc">只挑选北欧大西洋鲑鱼，帝皇鲜定制酱料包</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-3@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">

                        <h3 class="goods-title font-weight-400">千岛湖乡村鸡蛋家庭装</h3>
                        <p class="goods-desc">千岛湖鸡蛋，谷物喂养，蛋清浓稠，蛋黄橙红</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-4@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">

                        <h3 class="goods-title font-weight-400">浙江象山 小黄鱼1kg</h3>
                        <p class="goods-desc">正宗海捕小黄鱼，渔船直供</p>
                        <span class="desc-tag">顺丰到家</span> <span class="desc-tag">营养丰富</span>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-5@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">

                        <h3 class="goods-title font-weight-400">东海三去鱿鱼须250g</h3>
                        <p class="goods-desc">产自舟山海域，肉质细腻鲜嫩有嚼劲</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-6@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">草原领头羊 泉水羊蝎子500g</h3>
                        <p class="goods-desc">内蒙古小羊羔，饮泉而生，食草而长，骨肉相</p>
                        <p class="goods-price">
                            <span class="member-price">会员价</span>
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-7@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">

                        <h3 class="goods-title font-weight-400">鲜活花蛤40-60个/500g</h3>
                        <p class="goods-desc">肥厚肉嫩，鲜活鲜美
                        </p>
                        <p class="hot-sale">蛤类热卖榜 <span class="font-weight-800">TOP 1</span></p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-8@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">农夫好牛 进口牛腩块500g</h3>
                        <p class="goods-desc">味道纯正，肥瘦相间，路途遥远，依然新鲜</p>
                        <p class="goods-price">
                            <span class="worry-free-price">会员价</span>
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- 优鲜专卖 -->
    <section class="fresh-section margin-center">
        <h1 class="fresh-section-title">鲜品专区</h1>
        <div class="check-more">
            查看更多
        </div>
        <div class="fresh-section-content">
            <div class="section-poster">
                <img src="./images/ad-3@2x.png" alt="">
            </div>
            <div class="section-list">
                <div class="section-list-item">
                    <img src="./images/goods-cover-9@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">高山小青瓜400g</h3>
                        <p class="goods-desc">高山蔬菜，农场直供，色泽翠绿，味甘多汁</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">7.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-10@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">透心红胡萝卜350g</h3>
                        <p class="goods-desc">又名红皮胡萝卜，外表红润，口感微甜，清脆</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-11@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">

                        <h3 class="goods-title font-weight-400">湖北新鲜脆藕300g</h3>
                        <p class="goods-desc">质细白嫩，藕丝绵长，口味香甜，营养丰富</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-12@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">果香味儿彩椒300g</h3>
                        <p class="goods-desc">美味脆嫩，有果香味儿。由于天气影响，彩椒</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-13@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">国产红心火龙果3个装</h3>
                        <p class="goods-desc">鳞片干枯，果皮发皱，是树上熟火龙果的标志</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-14@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">DOLE金菠萝切片（半只）</h3>
                        <p class="goods-desc">无需盐水浸泡，酸甜脆嫩，现切及时，求带走</p>
                        <p class="goods-price">
                            <span class="member-price">会员价</span>
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-15@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">泰国椰青4个装（送开椰器）</h3>
                        <p class="goods-desc">泰国直采，人气4只装，甘甜椰汁，爽滑椰肉
                        </p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-16@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">都乐菲律宾木瓜4颗</h3>
                        <p class="goods-desc">口感浓郁，味道香甜</p>
                        <span class="desc-tag">进口</span>
                        <p class="goods-price">
                            <span class="worry-free-price">会员价</span>
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>


    <!-- 冷冻饮品 -->
    <section class="fresh-section margin-center">
        <h1 class="fresh-section-title">鲜品专区</h1>
        <div class="check-more">
            查看更多
        </div>
        <div class="fresh-section-content">
            <div class="section-poster">
                <img src="./images/ad-4@2x.png" alt="">
            </div>
            <div class="section-list">
                <div class="section-list-item">
                    <img src="./images/goods-cover-17@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">海霸王 原味香肠268g</h3>
                        <p class="goods-desc">正宗台湾风味秘制，选用上等冷鲜肉，天然肠</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">7.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-18@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">植爱生活植物肉鲜美大包</h3>
                        <p class="goods-desc">用富含蛋白的非转基因植物性原料制成，低饱</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-19@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">

                        <h3 class="goods-title font-weight-400">客来美 蟹味棒145g</h3>
                        <p class="goods-desc">韩国进口，鲜嫩多汁，丝丝分明，肉质弹爽</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-20@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">黑虎虾虾滑 100g</h3>
                        <p class="goods-desc">精选进口黑虎虾，虾仁量占比>92%，口感</p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-21@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">索菲亚朗姆葡萄冰糕450g</h3>
                        <p class="goods-desc">奶香浓郁，口感顺滑</p>
                        <p class="hot-sale">冰淇淋热卖榜 <span class="font-weight-800">TOP 1</span></p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-22@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">认养一头牛 酪蛋白醇牛奶</h3>
                        <p class="goods-desc">源自自有牧场，品质保障</p>
                        <span class="desc-tag">全脂</span> <span class="desc-tag">优于欧盟标准</span>
                        <p class="goods-price">
                            <span class="member-price">会员价</span>
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-23@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">渣SIR 山楂果汁气泡水礼盒</h3>
                        <p class="goods-desc">100%山楂果汁含量，易拉环，解辣爽口
                        </p>
                        <p class="goods-price">
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒</p>
                    </div>
                </div>
                <div class="section-list-item">
                    <img src="./images/goods-cover-24@2x.png" class="goods-cover" alt="">
                    <div class="goods-info">
                        <h3 class="goods-title font-weight-400">白桃乌龙味无糖气泡酒</h3>
                        <p class="goods-desc">0糖0脂，复合口味，劲爽气泡，畅饮无负担</p>
                        <p class="goods-price">
                            <span class="worry-free-price">会员价</span>
                            <span class="currency-symbol font-weight-400">￥</span>
                            <span class="price-number font-weight-400">38.9</span>/盒
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>



    <!-- 底部 -->
    <footer>
        <div class="footer-head">
            <ul>
                <li>
                    <img src="./images/icons/icon-footer-1@2x.png" alt="">
                    <span>7天无理由退货</span>
                </li>
                <li>
                    <img src="./images/icons/icon-footer-2@2x.png" alt="">
                    <span>15天免费换货</span>
                </li>
                <li>
                    <img src="./images/icons/icon-footer-3@2x.png" alt="">
                    <span>满69包邮</span>
                </li>
                <li>
                    <img src="./images/icons/icon-footer-4@2x.png" alt="">
                    <span>666家线下自提点</span>
                </li>
                <li>
                    <img src="./images/icons/icon-footer-5@2x.png" alt="">
                    <span>666家线下自提点</span>
                </li>
            </ul>
        </div>
        <div class="footer-content">
            <div class="footer-guide">
                <ul>
                    <li>
                        <h1>帮助中心</h1>
                        <p>账户管理</p>
                        <p>购物指南</p>
                        <p>订单操作</p>
                    </li>
                    <li>
                        <h1>服务支持</h1>
                        <p>售后政策</p>
                        <p>自主服务</p>
                        <p>相关下载</p>
                    </li>
                    <li>
                        <h1>线下门店</h1>
                        <p>美日之家</p>
                        <p>服务网点</p>
                        <p>授权经销商</p>
                    </li>
                    <li>
                        <h1>关注我们</h1>
                        <p>新浪微博</p>
                        <p>官方微信</p>
                        <p></p>
                    </li>
                </ul>
            </div>
            <div class="footer-contact">
                <h1 class="customer-service-number">400-000-0000</h1>
                <p class="contact-time">服务时间：<span class="color-6">8：00-18：00 (仅收市话费)</span></p>
                <p class="customer-service">
                    人工客服 <img src="./images/icons/icon-footer-6@2x.png" alt="">
                </p>
                <p class="contact-us">反馈邮箱： <span class="color-6">fresh-feedback@mrsx.com</span>
                </p>
            </div>
        </div>
    </footer>
</body>

</html>